<template>
  <el-dialog
    v-model="dialogVisible"
    title="选址方案"
    width="40%"
    :close-on-click-modal="false"
    @close="$emit('close')"
  >
    <el-input
      clearable
      v-model="address"
      placeholder="请输入"
      class="input-with-select"
    >
      <template #append>
        <el-button
          icon="el-icon-search"
          style="color: #1299f5"
          @click="confirm"
        ></el-button>
      </template>
    </el-input>
    <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
      <el-table-column align="center" prop="name" label="因子名称" />
      <el-table-column align="center" prop="tiaojian" label="条件" />
      <el-table-column align="center" prop="value" label="约束值" />
      <el-table-column align="center" label="操作">
        <template #default>
          <el-button type="text" size="small" @click="chooseHandleClick"
            >选址</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      :layout="'total, pager'"
      @pagination="getList"
    />
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>-->
  </el-dialog>
</template>

<script lang="ts">
import Pagination from "../../../components/Pagination/pagination.vue";
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
export default defineComponent({
  components: { Pagination },
  props: {
    visible: {
      type: Boolean,
      dedault: false,
    },
  },
  setup(props) {
    let dialogVisible = ref(false);
    let address = ref("");
    let total = ref(4);
    let queryParams = reactive({ pageNum: 1, pageSize: 0 });
    const tableData = reactive([
      { name: "123", tiaojian: "22", value: 1 },
      { name: "4523", tiaojian: "33", value: 2 },
      { name: "123", tiaojian: "22", value: 1 },
      { name: "4523", tiaojian: "33", value: 2 },
    ]);
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          dialogVisible.value = val;
        }
      }
    );
    // console.log("dialogVisible", dialogVisible);
    //搜索
    const confirm = () => {
      console.log("搜索", 914326);
    };
    //操作
    const chooseHandleClick = () => {
      console.log("选址", 914326);
    };
    //请求
    const getList = () => {
      console.log("请求", 914326);
    };
    return {
      address,
      tableData,
      dialogVisible,
      total,
      ...toRefs(queryParams),
      confirm,
      chooseHandleClick,
      getList,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.el-pagination) {
  display: flex;
  justify-content: center;
}
.el-dialog {
  width: 100%;
}
</style>
